<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火焰烟雾监测系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6', // 蓝色作为主色调
                        secondary: '#10B981', // 绿色作为辅助色
                        danger: '#EF4444', // 红色用于报警提示
                        dark: '#1E293B', // 深色用于文本
                        success: '#00B42A',
                        warning: '#FF7D00',
                        light: '#F2F3F5'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.3s ease-in-out',
                        'fade-out': 'fadeOut 0.5s ease-in-out forwards'
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0', transform: 'translateY(-10px)' },
                            '100%': { opacity: '1', transform: 'translateY(0)' }
                        },
                        fadeOut: {
                            '0%': { opacity: '1', transform: 'translateY(0)' },
                            '100%': { opacity: '0', transform: 'translateY(-10px)', visibility: 'hidden' }
                        }
                    }

                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .tab-active {
                @apply bg-primary text-white font-medium shadow-lg;
            }
            .tab-inactive {
                @apply bg-gray-100 text-gray-600 hover:bg-gray-200 transition-all duration-200;
            }
            .fade-in {
                animation: fadeIn 0.5s ease-in-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }
            .status-indicator {
                @apply inline-block w-2 h-2 rounded-full mr-2;
            }
            .notification-shadow {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            }
        }
    </style>
    <script type="module" src="{{ url_for('static', filename='js/socket.js') }}"></script>
</head>
<body class="font-inter bg-gray-50 text-dark">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-md">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row items-center justify-between py-4">
                <!-- 系统标题 -->
                <div class="flex items-center mb-4 md:mb-0">
                    <i class="fa fa-fire text-danger text-2xl mr-2"></i>
                    <h1 class="text-xl md:text-2xl font-bold">火焰烟雾监测系统</h1>
                </div>

                <!-- 导航选项卡 -->
                <div class="flex space-x-2 w-full md:w-auto">
                    <button id="tab-upload" class="tab-active flex-1 md:flex-none px-6 py-3 rounded-lg transition-all duration-300">
                        <i class="fa fa-upload mr-2"></i>文件上传
                    </button>
                    <button id="tab-camera" class="tab-inactive flex-1 md:flex-none px-6 py-3 rounded-lg transition-all duration-300">
                        <i class="fa fa-video-camera mr-2"></i>摄像头检测
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="container mx-auto px-4 py-6">
        <!-- 文件上传页面 -->
        <section id="page-upload" class="fade-in">
            <div class="grid grid-cols-1 lg:grid-cols-5 gap-6">
                <!-- 左侧控制面板 -->
                <div class="lg:col-span-1 bg-white rounded-xl shadow-md p-6">
                    <h2 class="text-xl font-bold mb-6 flex items-center">
                        <i class="fa fa-sliders text-primary mr-2"></i>控制面板
                    </h2>

                    <!-- 图片上传 -->
                    <div id="image-upload-module" class="mb-6">
                        <h3 class="text-lg font-semibold mb-3">图片上传</h3>
                        <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-primary transition-colors duration-200 relative">
                            <input type="file" id="image-upload" accept="image/*" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer" />
                            <label for="image-upload" class="cursor-pointer">
                                <i class="fa fa-cloud-upload text-3xl text-gray-400 mb-2"></i>
                                <p class="text-gray-600">点击上传图片</p>
                            </label>
                        </div>
                        <button id="upload-image-btn" class="w-full mt-3 bg-primary hover:bg-primary/90 text-white py-2 px-4 rounded-lg transition-all duration-200 flex items-center justify-center">
                            <i class="fa fa-paper-plane mr-2"></i>上传图片
                        </button>
                    </div>

                    <!-- 视频上传 -->
                    <div id="video-upload-module" class="mb-6">
                        <h3 class="text-lg font-semibold mb-3">视频上传</h3>
                        <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-primary transition-colors duration-200 relative">
                            <input type="file" id="video-upload" accept="video/*" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer" />
                            <label for="video-upload" class="cursor-pointer">
                                <i class="fa fa-film text-3xl text-gray-400 mb-2"></i>
                                <p class="text-gray-600">点击上传视频</p>
                            </label>
                        </div>
                        <button id="upload-video-btn" class="w-full mt-3 bg-primary hover:bg-primary/90 text-white py-2 px-4 rounded-lg transition-all duration-200 flex items-center justify-center">
                            <i class="fa fa-paper-plane mr-2"></i>上传视频
                        </button>
                    </div>
                </div>

                <!-- 右侧结果区域 -->
                <div class="lg:col-span-4 bg-white rounded-xl shadow-md p-6">
                    <div class="flex items-center justify-between mb-6">
                        <h2 class="text-xl font-bold flex items-center">
                            <i class="fa fa-eye text-primary mr-2"></i>处理结果
                        </h2>
                        <button id="save-result-btn" class="bg-secondary hover:bg-secondary/90 text-white py-2 px-4 rounded-lg transition-all duration-200 flex items-center disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                            <i class="fa fa-save mr-2"></i>保存结果
                        </button>
                    </div>

                    <!-- 预览区域 -->
                        <div class="relative aspect-w-16 aspect-h-9 rounded-lg overflow-hidden bg-gray-100 mb-6">
                            <!-- 比例容器，自动维持16:9 -->
                            <div class="w-full h-full flex items-center justify-center">
                                <!-- 图片预览 -->
                                <img
                                    id="preview-image"
                                    alt="预览"
                                    class="hidden max-w-full max-h-full object-contain"
                                >

                                <!-- 视频预览 -->
                                <video
                                    id="preview-video"
                                    class="hidden max-w-full max-h-full object-contain"
                                    controls
                                    controlsList="nodownload"
                                >
                                </video>
                            </div>

                            <!-- 处理画布（保持绝对定位） -->
                            <canvas
                                id="processing-canvas"
                                class="hidden absolute top-0 left-0 w-full h-full"
                            ></canvas>
                        </div>

                    <!-- 进度条 -->
                    <div id="progress-container" class="mb-6">
                    </div>

                    <!-- 报警信息 -->
                    <div>
                        <h3 class="text-lg font-semibold mb-3 flex items-center">
                            <i class="fa fa-bell text-danger mr-2"></i>报警信息
                        </h3>
                        <div id="alarm-container" class="space-y-2 max-h-[150px] overflow-y-auto">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 摄像头检测页面 -->
        <section id="page-camera" class="fade-in hidden">
            <div class="grid grid-cols-1 lg:grid-cols-5 gap-6">
                <!-- 左侧控制面板 -->
                <div class="lg:col-span-1 bg-white rounded-xl shadow-md p-6">
                    <h2 class="text-xl font-bold mb-6 flex items-center">
                        <i class="fa fa-camera text-primary mr-2"></i>摄像头控制
                    </h2>
                    <!-- 摄像头设置 -->
                    <div class="space-y-4">
                        <!-- 采样频率设置 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">采样频率(ms)</label>
                            <div class="flex items-center">
                                <input type="number" id="camera-sample-rate" min="10" max="1000" value="250" class="flex-1 border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/50">
                                <button id="apply-camera-rate-btn" class="ml-2 bg-secondary hover:bg-secondary/90 text-white px-3 py-2 rounded-lg transition-all duration-200">
                                    <i class="fa fa-check"></i> 应用
                                </button>
                            </div>
                        </div>

                        <!-- JSON文件上传功能 -->
                        <div id="config-upload-module" class="space-y-2">
                            <h3 class="text-lg font-semibold mb-3">配置文件上传</h3>
                            <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-primary transition-colors duration-200 relative">
                                <input type="file" id="config-upload" accept=".json" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer" />
                                <label for="config-upload" class="cursor-pointer">
                                    <i class="fa fa-cloud-upload text-3xl text-gray-400 mb-2"></i>
                                    <p class="text-gray-600">点击上传配置文件</p>
                                </label>
                            </div>
                            <!-- 上传配置按钮（带状态切换功能） -->
                            <button id="config-upload-btn"
                                    class="w-full mt-3 bg-gray-300 text-gray-500 cursor-not-allowed py-2 px-4 rounded-lg transition-all duration-200 flex items-center justify-center"
                                    disabled>
                                <i class="fa fa-paper-plane mr-2"></i>上传配置
                            </button>
                          <p class="text-xs text-gray-500 mt-1">支持格式：下载后的JSON文件</p>
                        </div>

                        <!-- 获取设备并生成JSON按钮 -->
                        <button id="generate-json-btn" class="w-full bg-secondary hover:bg-secondary/90 text-white py-2 px-4 rounded-lg transition-all duration-200 flex items-center justify-center">
                            <i class="fa fa-file-export mr-2"></i> 获取设备并生成JSON
                        </button>

                        <!-- 开始/停止按钮 -->
                        <button id="start-camera-btn" class="w-full bg-secondary hover:bg-secondary/90 text-white py-2 px-4 rounded-lg transition-all duration-200 flex items-center justify-center">
                            <i class="fa fa-play mr-2"></i> 开始监测
                        </button>
                        <button id="stop-camera-btn" class="w-full bg-gray-500 text-white py-2 px-4 rounded-lg transition-all duration-200 flex items-center justify-center" disabled>
                            <i class="fa fa-stop mr-2"></i> 停止监测
                        </button>
                    </div>
                </div>

                <!-- 中间结果区域 -->
                <div class="lg:col-span-3 bg-white rounded-xl shadow-md p-6">
                        <!-- 这里需要添加 检测到摄像头：n个  -->
                        <section id="cameras_info" class="mb-8">
                            <div class="bg-white rounded-xl shadow-md p-6">
                                <h2 class="text-xl font-semibold mb-4 flex items-center">
                                    <i class="fa fa-info-circle text-primary mr-2"></i> 设备信息
                                </h2>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div class="flex items-center">
                                        <span class="font-medium w-32">已检测摄像头:</span>
                                        <span id="cameraCount" class="text-primary font-semibold">0</span>
                                    </div>
                                    <div class="flex items-center">
                                        <span class="font-medium w-32">状态:</span>
                                        <span id="statusText" class="flex items-center">
                                            <span class="status-indicator bg-gray-400"></span>
                                            <span>未连接</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </section>

                    <!-- 结果滚动区域 -->
                    <div class="bg-gray-50 rounded-lg p-4 h-[500px] overflow-y-auto">
                        <div id="camera-results" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            <!-- 摄像头1 -->
                            <div class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-all duration-200">
                                <div class="relative">
                                    <img src="https://picsum.photos/600/400?random=1" alt="摄像头1" class="w-full h-48 object-cover">
                                    <div class="absolute top-2 left-2 bg-black/60 text-white text-sm px-2 py-1 rounded-md">
                                        <span class="font-medium">ID: CAM001 | ROOM: F1-01</span>
                                    </div>
                                    <button class="absolute bottom-2 right-2 bg-white/80 hover:bg-white text-gray-800 p-1.5 rounded-full transition-colors duration-200" onclick="toggleFullscreen('camera-1')">
                                        <i class="fa fa-expand"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- 摄像头2 -->
                            <div class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-all duration-200">
                                <div class="relative">
                                    <img src="https://picsum.photos/600/400?random=2" alt="摄像头2" class="w-full h-48 object-cover">
                                    <div class="absolute top-2 left-2 bg-black/60 text-white text-sm px-2 py-1 rounded-md">
                                        <span class="font-medium">ID: CAM002 | ROOM: F1-05</span>
                                    </div>
                                    <button class="absolute bottom-2 right-2 bg-white/80 hover:bg-white text-gray-800 p-1.5 rounded-full transition-colors duration-200" onclick="toggleFullscreen('camera-2')">
                                        <i class="fa fa-expand"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- 摄像头3 -->
                            <div class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-all duration-200">
                                <div class="relative">
                                    <img src="https://picsum.photos/600/400?random=3" alt="摄像头3" class="w-full h-48 object-cover">
                                    <div class="absolute top-2 left-2 bg-black/60 text-white text-sm px-2 py-1 rounded-md">
                                        <span class="font-medium"></span> | ID: CAM003 | ROOM: F1-03
                                    </div>
                                    <button class="absolute bottom-2 right-2 bg-white/80 hover:bg-white text-gray-800 p-1.5 rounded-full transition-colors duration-200" onclick="toggleFullscreen('camera-3')">
                                        <i class="fa fa-expand"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- 摄像头4 -->
                            <div class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-all duration-200">
                                <div class="relative">
                                    <img src="https://picsum.photos/600/400?random=4" alt="摄像头4" class="w-full h-48 object-cover">
                                    <div class="absolute top-2 left-2 bg-black/60 text-white text-sm px-2 py-1 rounded-md">
                                        <span class="font-medium">Room:</span>
                                    </div>
                                    <button class="absolute bottom-2 right-2 bg-white/80 hover:bg-white text-gray-800 p-1.5 rounded-full transition-colors duration-200" onclick="toggleFullscreen('camera-4')">
                                        <i class="fa fa-expand"></i>
                                    </button>
                                </div>
                                <div class="p-3 flex justify-between items-center">
                                    <span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-sm">CameraID:</span>
                                    <span class="text-xs text-gray-500">Video001</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 右侧报警区域 -->
                <div class="lg:col-span-1 bg-white rounded-xl shadow-md p-6">
                    <h2 class="text-xl font-bold mb-6 flex items-center">
                        <i class="fa fa-exclamation-triangle text-danger mr-2"></i>报警记录
                    </h2>
                    <div id = "camera-alarm-container" style="min-height: 400px; max-height: 600px; overflow-y:auto; padding: 1rem;">
                        <div class="p-3 bg-white rounded-lg border-l-4 border-red-500 shadow-sm hover:shadow-md transition-all duration-200 cursor-pointer transform hover:-translate-y-1 relative">
                            <!-- 警报类型和时间 -->
                            <div class="flex justify-between items-center mb-2">
                                <div class="flex items-center gap-2">
                                    <div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center">
                                        <i class="fa fa-fire text-red-500"></i>
                                    </div>
                                    <h4 class="font-medium text-red-800 truncate max-w-[150px]" title="火焰警报">
                                        火焰警报
                                    </h4>
                                </div>
                                <span class="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded" title="2023-10-25 10:23:50">
                                    10:23:50
                                </span>
                            </div>

                            <!-- 摄像头和房间信息（单行显示，悬停提示） -->
                            <div class="flex justify-between items-center text-sm">
                                <!-- 摄像头标签 -->
                                <div class="flex items-center gap-1.5 truncate max-w-[200px]" title="CAMERA label 超长文本测试">
                                    <i class="fa fa-video-camera text-gray-400"></i>
                                    <span class="text-gray-700 truncate">CAMERA label</span>
                                </div>

                                <!-- 房间ID -->
                                <div class="flex items-center gap-1.5 truncate max-w-[100px]" title="Room ID: 101 超长房间编号测试">
                                    <i class="fa fa-map-marker text-gray-400"></i>
                                    <span class="text-gray-700">Room ID: 101</span>
                                </div>
                            </div>

                            <!-- 全局悬停提示（可选，用于长文本整体提示） -->
                            <div class="absolute inset-0 bg-transparent pointer-events-none">
                                <span class="sr-only">悬停查看完整信息</span>
                            </div>
                        </div>

                        <!-- 烟雾警报记录 -->
                        <div class="p-3 bg-white rounded-lg border-l-4 border-yellow-500 shadow-sm hover:shadow-md transition-all duration-200 cursor-pointer transform hover:-translate-y-1 relative">
                            <!-- 警报类型和时间 -->
                            <div class="flex justify-between items-center mb-2">
                                <div class="flex items-center gap-2">
                                    <div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center">
                                        <i class="fa fa-smog text-yellow-500"></i> <!-- 烟雾图标 -->
                                    </div>
                                    <h4 class="font-medium text-yellow-800 truncate max-w-[150px]" title="烟雾警报">
                                        烟雾警报
                                    </h4>
                                </div>
                                <span class="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded" title="2023-10-25 09:45:12">
                                    09:45:12
                                </span>
                            </div>

                            <!-- 摄像头和房间信息（单行显示，悬停提示） -->
                            <div class="flex justify-between items-center text-sm">
                                <!-- 摄像头标签 -->
                                <div class="flex items-center gap-1.5 truncate max-w-[200px]" title="KITCHEN CAMERA 超长文本测试">
                                    <i class="fa fa-video-camera text-gray-400"></i>
                                    <span class="text-gray-700 truncate">KITCHEN CAMERA</span>
                                </div>

                                <!-- 房间ID -->
                                <div class="flex items-center gap-1.5 truncate max-w-[100px]" title="Room ID: 102 厨房区域编号">
                                    <i class="fa fa-map-marker text-gray-400"></i>
                                    <span class="text-gray-700">Room ID: 102</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 mt-10">
        <div class="container mx-auto px-4 py-6">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <p class="text-gray-600 text-sm">© 2025 火焰烟雾监测系统. 保留所有权利.</p>
                </div>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-200">
                        <i class="fa fa-question-circle"></i> 帮助
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-200">
                        <i class="fa fa-file-text"></i> 文档
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-200">
                        <i class="fa fa-envelope"></i> 联系我们
                    </a>
                </div>
            </div>
        </div>
    </footer>
     <!-- 通知容器 -->
    <div id="notification-container" class="fixed inset-0 flex items-center justify-center pointer-events-none z-50"></div>
    <script src="https://cdn.socket.io/4.4.1/socket.io.min.js"></script>
    <script src="{{ url_for('static', filename='js/page_change.js') }}"></script>
    <script src="{{ url_for('static', filename='js/FileSelector.js') }}"></script>
    <script type="module" src="{{ url_for('static', filename='js/alarmAudio.js') }}"></script>
    <script type="module" src="{{ url_for('static', filename='js/cameraConfig.js') }}"></script>
    <script type="module" src="{{ url_for('static', filename='js/CameraManager.js') }}"></script>
    <script type="module" src="{{ url_for('static', filename='js/FileUpLoad.js') }}"></script>
    <script type="module" src="{{ url_for('static', filename='js/fullScreen.js') }}"></script>
</body>
</html>
